<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
	xmlns:f="http://java.sun.com/jsf/core"
	xmlns:h="http://java.sun.com/jsf/html"
	xmlns:a4j="http://richfaces.org/a4j"
	xmlns:rich="http://richfaces.org/rich">
<h:head>
	<title>Aplicacion con RichFaces</title>
</h:head>
<h:body>
	<h:outputStylesheet library="css" name="application.css" target="head" />
	<f:view>
		<div align="center">
			<div style="width: 800px;" align="left">
				<rich:panel>
					<h:form>
						<a4j:queue />
						<a4j:status id="stateStatus">
							<f:facet name="start">
								<h:graphicImage library="images" name="ajax-loader.gif"
									style="position: absolute; left: 50%; top: 20px" />
							</f:facet>
						</a4j:status>
						<h:panelGrid columns="2">
							<h:outputText value="Seleccione un color" />
							<h:selectOneListbox value="#{ejemploQueueBean.color}">
								<f:selectItem itemValue="green" itemLabel="Green" />
								<f:selectItem itemValue="blue" itemLabel="Blue" />
								<f:selectItem itemValue="red" itemLabel="Red" />
								<f:selectItem itemValue="yellow" itemLabel="Yellow" />
								<f:selectItem itemValue="orange" itemLabel="Orange" />
								<f:selectItem itemValue="grey" itemLabel="Grey" />
								<f:selectItem itemValue="pink" itemLabel="Pink" />
								<a4j:ajax event="change" render="colorPanel"
									listener="#{ejemploQueueBean.selectColor}" />
							</h:selectOneListbox>
						</h:panelGrid>
						<h:panelGrid id="colorPanel" bgcolor="#{ejemploQueueBean.color}">
							<h:outputText value="RichFaces"
								style="font-weight: bold; font-size: xx-large;" />
						</h:panelGrid>
						<h:panelGrid columns="4">
							<h:outputText
								value="Sin agrupar, todos los clicks se procesan en el servidor " />
							<a4j:commandButton value="Red"
								action="#{ejemploQueueBean.selectRed}" render="colorPanel" />
							<a4j:commandButton value="Green"
								action="#{ejemploQueueBean.selectGreen}" render="colorPanel" />
							<a4j:commandButton value="Blue"
								action="#{ejemploQueueBean.selectBlue}" render="colorPanel" />
						</h:panelGrid>
						<h:panelGrid columns="4">
							<h:outputText
								value="Agrupados, despues de procesar la respuesta del primer click, solo el ultimo click se encola" />
							<a4j:commandButton value="Red"
								action="#{ejemploQueueBean.selectRed}" render="colorPanel">
								<a4j:attachQueue requestGroupingId="colorForm" />
							</a4j:commandButton>
							<a4j:commandButton value="Green"
								action="#{ejemploQueueBean.selectGreen}" render="colorPanel">
								<a4j:attachQueue requestGroupingId="colorForm" />
							</a4j:commandButton>
							<a4j:commandButton value="Blue"
								action="#{ejemploQueueBean.selectBlue}" render="colorPanel">
								<a4j:attachQueue requestGroupingId="colorForm" />
							</a4j:commandButton>
						</h:panelGrid>
					</h:form>
				</rich:panel>
				<a4j:log level="ALL" />
			</div>
		</div>
	</f:view>
</h:body>
</html>